export const themes = {
    // 中性主题
    light: {
        's-back': '#f5f5f5',          // 页面背景色
        's-back-soft': '#f0f0f0',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#f9f9f9', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#333333',          // 主要文本色
        's-text-secondary': '#666666', // 次要文本色
        's-text-tertiary': '#999999',  // 第三文本色
        's-border': '#e5e5e5',        // 边框颜色
        's-hover-back': '#e6f2ff',    // 悬停背景色(比主色浅)
        's-active': '#3a8ee6',        // 激活状态颜色(比主色深)
        's-active-back': '#ecf5ff',   // 激活背景色
        's-card': '#ffffff',          // 卡片背景色
        's-header': '#f0f0f0',        // 头部背景色(柔和版)
        's-menu': '#e8e8e8',          // 菜单背景色(柔和版) - 比s-back-soft稍浅
        's-primary': '#409eff',       // 主色调
        's-button': '#409eff',        // 按钮颜色
        's-button-hover': '#66b1ff',  // 按钮悬停颜色
        's-button-active': '#3a8ee6', // 按钮激活颜色
        's-button-disabled': '#a0cfff', // 按钮禁用颜色
        's-input': '#ffffff',         // 输入框背景色
        's-input-border': '#dcdfe6',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    dark: {
        's-back': '#2d2d2d',          // 页面背景色
        's-back-soft': '#383838',     // 柔和版页面背景色
        's-back-soft-original': '#383838', // 原始柔和版页面背景色
        's-back-text': '#f5f5f5',     // 背景文本色(浅灰，非纯白)
        's-back-text-secondary': '#cccccc', // 次要背景文本色
        's-back-text-tertiary': '#999999',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#cccccc', // 次要文本色
        's-text-tertiary': '#999999',  // 第三文本色
        's-border': '#444444',        // 边框颜色(柔和版)
        's-hover-back': '#ffd794',    // 悬停背景色(比主色浅)
        's-active': '#e68a00',        // 激活状态颜色(比主色深)
        's-active-back': '#333333',   // 激活背景色
        's-card': '#333333',          // 卡片背景色(柔和版)
        's-header': '#333333',        // 头部背景色(柔和版)
        's-menu': '#333333',          // 菜单背景色(柔和版)
        's-primary': '#ff9800',       // 主色调
        's-button': '#ff9800',        // 按钮颜色
        's-button-hover': '#ffac38',  // 按钮悬停颜色
        's-button-active': '#e68a00', // 按钮激活颜色
        's-button-disabled': '#ffd794', // 按钮禁用颜色
        's-input': '#333333',         // 输入框背景色
        's-input-border': '#444444',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },

    // 彩色主题
    blue: {
        's-back': '#3b82f6',          // 页面背景色
        's-back-soft': '#dbeafe',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#eff6ff', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#e6f7ff', // 次要文本色
        's-border': '#60a5fa',        // 边框颜色(柔和版)
        's-hover-back': '#60a5fa',    // 悬停背景色(比主色浅)
        's-active': '#f97316',        // 激活状态颜色(橙色，蓝色的互补色)
        's-active-back': '#1d4ed8',   // 激活背景色(主色调)
        's-card': '#4277eb',          // 卡片背景色(柔和版)
        's-header': '#4277eb',        // 头部背景色(柔和版)
        's-menu': '#4277eb',          // 菜单背景色(柔和版)
        's-primary': '#3b82f6',       // 主色调(降低饱和度的蓝色)
        's-button': '#3b82f6',        // 按钮颜色(与主色一致)
        's-button-hover': '#4277eb',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#f97316', // 按钮激活颜色(橙色，蓝色的互补色)
        's-input': '#0958d9',         // 输入框背景色
        's-input-border': '#4080ff',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    green: {
        's-back': '#22c55e',          // 页面背景色
        's-back-soft': '#d1fae5',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#ecfdf5', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#e6fff0', // 次要文本色
        's-border': '#4ade80',        // 边框颜色(柔和版)
        's-hover-back': '#4ade80',    // 悬停背景色(比主色浅)
        's-active': '#e11d48',        // 激活状态颜色(玫瑰红，绿色的互补色)
        's-active-back': '#15803d',   // 激活背景色(主色调)
        's-card': '#16a34a',          // 卡片背景色(柔和版)
        's-header': '#16a34a',        // 头部背景色(柔和版)
        's-menu': '#16a34a',          // 菜单背景色(柔和版)
        's-primary': '#22c55e',       // 主色调(降低饱和度的绿色)
        's-button': '#22c55e',        // 按钮颜色(与主色一致)
        's-button-hover': '#16a34a',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#e11d48', // 按钮激活颜色(玫瑰红，绿色的互补色)
        's-input': '#00a329',         // 输入框背景色
        's-input-border': '#36cf81',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    purple: {
        's-back': '#8b5cf6',          // 页面背景色
        's-back-soft': '#ede9fe',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#f5f3ff', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#f9f0ff', // 次要文本色
        's-border': '#a78bfa',        // 边框颜色(柔和版)
        's-hover-back': '#a78bfa',    // 悬停背景色(比主色浅)
        's-active': '#eab308',        // 激活状态颜色(黄色，紫色的互补色)
        's-active-back': '#6d28d9',   // 激活背景色(主色调)
        's-card': '#7c3aed',          // 卡片背景色(柔和版)
        's-header': '#7c3aed',        // 头部背景色(柔和版)
        's-menu': '#7c3aed',          // 菜单背景色(柔和版)
        's-primary': '#8b5cf6',       // 主色调(降低饱和度的紫色)
        's-button': '#8b5cf6',        // 按钮颜色(与主色一致)
        's-button-hover': '#7c3aed',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#eab308', // 按钮激活颜色(黄色，紫色的互补色)
        's-input': '#621bc9',         // 输入框背景色
        's-input-border': '#9370db',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    red: {
        's-back': '#ef4444',          // 页面背景色
        's-back-soft': '#fee2e2',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#fef2f2', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#fff2f0', // 次要文本色
        's-border': '#f87171',        // 边框颜色(柔和版)
        's-hover-back': '#f87171',    // 悬停背景色(比主色浅)
        's-active': '#0d9488',        // 激活状态颜色(青色，红色的互补色)
        's-active-back': '#b91c1c',   // 激活背景色(主色调)
        's-card': '#dc2626',          // 卡片背景色(柔和版)
        's-header': '#dc2626',        // 头部背景色(柔和版)
        's-menu': '#dc2626',          // 菜单背景色(柔和版)
        's-primary': '#ef4444',       // 主色调(降低饱和度的红色)
        's-button': '#ef4444',        // 按钮颜色(与主色一致)
        's-button-hover': '#dc2626',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#0d9488', // 按钮激活颜色(青色，红色的互补色)
        's-input': '#e81123',         // 输入框背景色
        's-input-border': '#ff8080',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    // 灰色主题
    grey: {
        's-back': '#6b7280',          // 页面背景色
        's-back-soft': '#e5e7eb',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#f3f4f6', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#f3f4f6', // 次要文本色
        's-border': '#9ca3af',        // 边框颜色(柔和灰色)
        's-hover-back': '#9ca3af',    // 悬停背景色(比主色浅)
        's-active': '#10b981',        // 激活状态颜色(翡翠绿，灰色的互补色)
        's-active-back': '#374151',   // 激活背景色(深灰色)
        's-card': '#4b5563',          // 卡片背景色(柔和灰色)
        's-header': '#4b5563',        // 头部背景色(柔和灰色)
        's-menu': '#4b5563',          // 菜单背景色(柔和灰色)
        's-primary': '#9ca3af',       // 主色调(降低饱和度的灰色)
        's-button': '#9ca3af',        // 按钮颜色(与主色一致)
        's-button-hover': '#9ca3af',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#10b981', // 按钮激活颜色(翡翠绿，灰色的互补色)
        's-input': '#374151',         // 输入框背景色
        's-input-border': '#6b7280',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    // 粉色主题
    pink: {
        's-back': '#ec4899',          // 页面背景色
        's-back-soft': '#fce7f3',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#fdf2f8', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#fdf2f8', // 次要文本色
        's-border': '#f9a8d4',        // 边框颜色(柔和版)
        's-hover-back': '#f9a8d4',    // 悬停背景色(比主色浅)
        's-active': '#06b6d4',        // 激活状态颜色(青色，粉色的互补色)
        's-active-back': '#db2777',   // 激活背景色(主色调)
        's-card': '#db2777',          // 卡片背景色(柔和版)
        's-header': '#db2777',        // 头部背景色(柔和版)
        's-menu': '#db2777',          // 菜单背景色(柔和版)
        's-primary': '#ec4899',       // 主色调(降低饱和度的粉色)
        's-button': '#ec4899',        // 按钮颜色(与主色一致)
        's-button-hover': '#db2777',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#06b6d4', // 按钮激活颜色(青色，粉色的互补色)
        's-input': '#d91c5c',         // 输入框背景色
        's-input-border': '#ff85b3',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
    // 青色主题
    cyan: {
        's-back': '#06b6d4',          // 页面背景色
        's-back-soft': '#a5f3fc',     // 柔和版页面背景色(加深)
        's-back-soft-original': '#ecfeff', // 原始柔和版页面背景色
        's-back-text': '#222222',     // 背景文本色(深灰，非纯黑)
        's-back-text-secondary': '#555555', // 次要背景文本色
        's-back-text-tertiary': '#888888',  // 第三背景文本色
        's-text': '#ffffff',          // 主要文本色
        's-text-secondary': '#e6fffa', // 次要文本色
        's-border': '#22d3ee',        // 边框颜色(柔和版)
        's-hover-back': '#22d3ee',    // 悬停背景色(比主色浅)
        's-active': '#ec4899',        // 激活状态颜色(粉色，青色的互补色)
        's-active-back': '#0891b2',   // 激活背景色(主色调)
        's-card': '#0891b2',          // 卡片背景色(柔和版)
        's-header': '#0891b2',        // 头部背景色(柔和版)
        's-menu': '#0891b2',          // 菜单背景色(柔和版)
        's-primary': '#06b6d4',       // 主色调(降低饱和度的青色)
        's-button': '#06b6d4',        // 按钮颜色(与主色一致)
        's-button-hover': '#0891b2',  // 按钮悬停颜色(柔和版主色)
        's-button-active': '#ec4899', // 按钮激活颜色(粉色，青色的互补色)
        's-input': '#0e7490',         // 输入框背景色
        's-input-border': '#06b6d4',  // 输入框边框色
        's-success': '#67c23a',       // 成功提示色
        's-warning': '#e6a23c',       // 警告提示色
        's-error': '#f56c6c',         // 错误提示色
        's-info': '#909399',          // 信息提示色
    },
};


// 应用主题样式
const changeStyle = (obj: Record<string, string>) => {
    // 检查是否启用柔和背景色
    const useSoftBackground = localStorage.getItem('useSoftBackground') === 'true';
    
    for (const key in obj) {
        if (key === 's-back') {
            // 特殊处理背景色变量，确保全局生效
            const backColor = useSoftBackground && obj['s-back-soft'] ? obj['s-back-soft'] : obj[key];
            document.documentElement.style.setProperty('--s-back', backColor);
            document.documentElement.style.setProperty('--s-background', backColor);
        } else {
            document.body.style.setProperty(`--${key}`, obj[key]);
        }
    }
};

// 导出有效主题列表
const validThemes = Object.keys(themes);

// 切换柔和背景色的方法
export const toggleSoftBackground = () => {
    const current = localStorage.getItem('useSoftBackground') === 'true';
    const newVal = !current;
    localStorage.setItem('useSoftBackground', newVal.toString());
    // 重新应用当前主题以更新背景色
    const currentTheme = localStorage.getItem('theme') || 'light';
    const themeConfig = themes[currentTheme as keyof typeof themes];
    changeStyle(themeConfig);
    return newVal;
};

// 改变主题的方法
export const set_theme = (themeName: string) => {
    // 验证主题是否存在
    const themeToUse = validThemes.includes(themeName) ? themeName : 'light';
    localStorage.setItem("theme", themeToUse); // 保存主题到本地
    const themeConfig = themes[themeToUse as keyof typeof themes];
    changeStyle(themeConfig); // 改变样式
    return themeToUse;
};

// 初始化主题
export const initTheme = () => {
    // 从本地存储获取主题，默认为亮色主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    // 设置主题
    return set_theme(savedTheme);
};
